<template>
	<view>
		<cu-custom>
			<block slot="right">
				<view class="color-100 margin-right bar-left justify-center" style="display: flex;" @tap="abbr">
					<image src="../../static/login/icon.png" class="content-icon"></image>
					<text style="font-size: 20px; line-height: 20px; text-align: center;">联系客服</text>
				</view>
			</block>
		</cu-custom>
		<view class="bg-set" :style="{ height: screenHeight }"></view>
		<view class="box">
			<view class="desc " :style="{paddingTop:(CustomBar + 14) + 'px'}">
				<view class="flex justify-start align-end">
					<image src="../../static/logo.png" class="logo"></image>
					<text class="desc-content">安全 真实 自主</text>
				</view>
				<view class="content">
					<text>相亲者已实名 虚假举报奖现金 海量单身 自由选择</text>
				</view>
			</view>
			<view style="margin-top: 127px;">
				<form @submit="submit">
					<view class="cu-form-group margin-top">
						<view class="cuIcon-people margin-right"></view>
						<input placeholder="请输入手机号码" name="phone"></input>
					</view>
					<view class="cu-form-group border-last">
						<view class="cuIcon-unlock margin-right"></view>
						<input placeholder="请输入密码" name="password"></input>
					</view>
					<view class="padding flex flex-direction" style="padding-bottom: 0;">
						<button class="cu-btn bg-btn-pick color-100 margin-tb-sm lg round" form-type="submit">登录</button>
					</view>
				</form>
			</view>
			<view class="flex justify-between">
				<text class="text-decoration" @tap="goForgotPassword">忘记密码？</text>
				<text class="text-decoration" @tap="goRegister">注册</text>
			</view>
		</view>
		
		<view :class='["custom-modal", "bottom-modal", isShow ? "show" : ""]'>
		  <view class="custom-dialog">
		    <view class="padding-xl">
				<view class="protocol-title"><text>联系客服</text></view>
				<image src="../../static/login/wechat.png" class="wechat"></image>
				<text class="protocol-content">131313133</text>
				
				<view class="padding flex flex-direction" style="padding-top: 0;">
					<button class="cu-btn bg-btn-pick color-100 margin-tb-sm lg round"  @tap="copyWeChat">复制微信号码联系客服</button>
				</view>
		    </view>
		  </view>
		</view>
		
	</view>
</template>

<script>
	import { mapMutations, mapActions, mapState } from 'vuex';

	export default {
		computed: {
			...mapState({
				isLogin: ({ user }) => user.isLogin,
			}),
		},
		data() {
			return {
				//屏幕高度
				screenHeight: 0,
				isShow: false,
				checkbox: [{
					value: 'A',
					checked: false
				}],
				jgkey: '5fcedd501fd796368143d74e'
			}
		},
		onLoad() {
		    this.screenHeight = uni.getSystemInfoSync().windowHeight;
			
		},
		methods: {
			...mapActions(['login', 'jimLogin']),
			// ...mapMutations(['setLoginStatus']),
			// 点击联系客服
			abbr() {
				this.isShow = true
			},
			copyWeChat() {
				const self = this;
				uni.setClipboardData({
				    data: 'hello',
				    success: function () {
						self.isShow = false
				    }
				});
			},
			// 登录
			async submit(e) {
				const data = e.detail.value
				if(!data.phone){
					return this.$api.msg("手机号码必填")
				}
			
				if(!data.password){
					return this.$api.msg("密码必填")
				}
				const res = await this.login({...data, msgid: '5fcedd501fd796368143d74e'})
				this.jimLogin({
					username: 'jiguang_' + res.id,
					password: '123456'
				})
				if(res) {
					uni.switchTab({
					    url:'../service/service',
					},true)
					
					// this.$Router.push({name:'service'})
				}
			},
			// 忘记密码
			goForgotPassword() {
				uni.navigateTo({
					url:"/pages/login/forgotPassword",
					animationDuration:300
				})
			},
			goRegister() {
				uni.navigateTo({
					url:"/pages/register/register",
					animationDuration:300
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

	.bg-set{
		position: fixed;
		width: 100%;
		min-height: 100%;
		top: 0;
		left: 0;
		background: url(../../static/login/background.png) no-repeat;
		background-position: 0px 0px;
		background-size: cover;
		z-index: -1;
		
	}

	.box {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		position: absolute;
		width: calc(100% - 48px);
		flex: 1;
		padding: 0 20upx;
		position: fixed;
		height: 100%;
	}
	.desc{
		.logo{
			height: 80px;
			width: 92px;
		}
		.desc-content{
			height: 33px;
			font-size: 24px;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 33px;
			color: #FFFFFF;
			margin-left: 6px;
			margin-bottom: 13px;
		}
		.content{
			color: #FFFFFF;
			font-size: 14px;
		}
	}
	.content-icon{
		width: 20px;
		height: 20px;
		margin-right: 4upx;
	}
	.color-gray{
		// font-size: 10px;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 14upx;
		color: #CCCCCC;
		opacity: 1;
	}
	.bg-btn-pick {
		background: linear-gradient(270deg, #C529DA 0%, #FA81CE 100%);
	}
	.bg-pick {
		background-color: #E428FD;
	}
	.color-pink {
		color: #E428FD;
	}
	.radius-100{
		border-radius: 16px;
		
	}
	.color-100{
		color: #FFFFFF;
	}
	.bar-left {
		// width: 100%;
		// justify-content: flex-end;
		// display: flex;
		position: absolute;
		right: 0;
	}
	.border-last{
		border-bottom: 1upx solid #707070;
	}
	.text-decoration {
		text-decoration: underline;
		font-size: 10px;
	}
	.protocol{
		text-align: center;
		font-size: 10px;
		font-weight: 500;
		line-height: 14px;
		margin-bottom: 40px;
		padding-top: 67px;
	}
	.wechat{
		display: block;
		width: 50px;
		height: 43.26px;
		margin: 10px auto;
		
	}
	.protocol-title{
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 22px;
		text-align: left;
		color: #333333;
		// margin-bottom: 65px;
	}
	.protocol-content{
		font-size: 18px;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 25px;
		color: #666666;
		margin-bottom: 22px;
	}
/* ==================
         模态窗口
 ==================== */
	.custom-modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1110;
		opacity: 0;
		outline: 0;
		text-align: center;
		-ms-transform: scale(1.185);
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000upx;
		// background: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
		
	}
	.custom-modal::before {
		content: "\200B";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}
	
	.custom-modal.show {
		opacity: 1;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}
	
	.custom-dialog {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		margin-left: auto;
		margin-right: auto;
		width: 680upx;
		max-width: 100%;
		background-color: #FFFFFF;
		border-radius: 10upx;
		overflow: hidden;
		
	}
	
	.custom-modal.bottom-modal::before {
		vertical-align: bottom;
	}
	
	.custom-modal.bottom-modal .custom-dialog {
		width: 100%;
		border-radius: 10px 10px 0px 0px;
		box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.16);
	}
	
	.custom-modal.bottom-modal {
		margin-bottom: -1000upx;
	}
	
	.custom-modal.bottom-modal.show {
		margin-bottom: 0;
	}
	
	.custom-modal.drawer-modal {
		transform: scale(1);
		display: flex;
	}
	
	.custom-modal.drawer-modal .custom-dialog {
		height: 100%;
		min-width: 200upx;
		border-radius: 0;
		margin: initial;
		transition-duration: 0.3s;
	}
	
	.custom-modal.drawer-modal.justify-start .custom-dialog {
		transform: translateX(-100%);
	}
	
	.custom-modal.drawer-modal.justify-end .custom-dialog {
		transform: translateX(100%);
	}
	
	.custom-modal.drawer-modal.show .custom-dialog {
		transform: translateX(0%);
	}
	.custom-modal .custom-dialog>.custom-bar:first-child .action{
	  min-width: 100rpx;
	  margin-right: 0;
	  min-height: 100rpx;
	}
	
	
</style>
